<template>
	<view>
		<view @tap="toRentingDetail(rent.houseId)">
			<view class="uni-flex uni-row">
				<view class="text uni-flex" style="width: 300rpx;height: 300rpx;-webkit-justify-content: center;justify-content: center;-webkit-align-items: center;align-items: center;">
					<image class="image" :src=rent.houseSurfaceplot></image>
				</view>
				<view class="uni-flex uni-column" style="-webkit-flex: 1;flex: 1;-webkit-justify-content: space-between;justify-content: space-between;">
					<view class="text" style="height: 100rpx;text-align: left;padding-left: 10rpx;padding-top: 10rpx;">
						<text class="heading">{{rent.rentingHeading}}</text>
					</view>
					<view class="uni-flex uni-row" style="height:50rpx">
						<view class="text" style="wdith:40rpx" v-text="rent.houseCity"></view>
						<view class="text" style="wdith:40rpx" v-text="rent.houseRegion"></view>
					</view>
					<view class="uni-flex uni-row" style="height:50rpx">
						<view class="text" style="wdith:60rpx" >{{rent.houseArea}}m²</view>
						<view class="text" style="wdith:40rpx" v-text="rent.houseDirection"></view>
						<view class="text" style="wdith:60rpx" v-text="rent.houseEstate"></view>
					</view>
					<view class="uni-flex uni-row">
						<view class="text" style="-webkit-flex: 1;flex: 1;">
							<text class="price">{{rent.rentingPrice}}元/月</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props:["rent"],
	data(){
		return{
		}
	},
	onLoad() {
		// console.log(rent)
	},
	mounted() {
		// console.log(rent)
	},
	methods: {
		// con(){
		// 	console.log("afdasfd")
		// 	console.log(rent)
		// }
		// getrent() {
		// 	console.log(this.rent)
		// }
		toRentingDetail(houseId){
			uni.navigateTo({
				url:'../agent/houseDetails?id='+houseId
			})
		}
	}
}
</script>

<style>
	.image{
		width: 300rpx;
		height: 300rpx;
		border-radius:15rpx;
	}

	.flex-item-V {
		width: 100%;
		height: 150rpx;
		text-align: center;
		line-height: 150rpx;
	}

	.text {
		margin: 15rpx 10rpx;
		background-color: #ffffff;
		height: 70rpx;
		line-height: 70rpx;
		color: rgb(22, 21, 21);
		font-size: 20rpx;
	}

	.heading{
		text-align: left;
		margin: 0rpx 0rpx;
		color: rgb(0, 0, 0);
		font-size: 35rpx;
		font-weight:bold;
		top:0%;
	}

	.price{
		color: rgb(255, 0, 0);
		font-weight: bold;
		text-align: left;
		font-size: 35rpx;
	}
	
</style>